<template>
    <div class="app-container">
        <div class="w-container">

            <div class="w-list" v-for="item in list" :key="item.airportId">
                <div class="w-img">
                    <img :src="item.airportPictureUrl">
                </div>
                <div class="w-cont">
                    <div class="w-left">
                        <div class="w-uva-name">
                            <div class="w-u">
                                <div class="w-dian"></div>
                                <span class="w-name">{{item.airportChildName}}</span>
                                <span>{{item.airportChildState | modeCode}}</span>
                            </div>
                            <div class="w-j">
                                <div class="w-dian"></div>
                                <span class="w-name">{{item.airportName}}</span>
                                <span>{{item.modeCode | modeCode}}</span>
                            </div>
                        </div>
                        <div class="w-address">
                            <i class="el-icon-location"></i>
                            <span>{{item.airportAddress}}</span>
                        </div>
                        <div class="w-p">
                            <div>机场已执行任务数：{{item.airportChildCapacity}}次</div>
                            <div>最后一次任务时间：{{item.airportEndTaskTime}}</div>
                            <div>机场固件版本号：{{item.firmwareVersion}}</div>
                        </div>
                        <div class="w-p">
                            <div>机场sn码：{{item.airportSn}}</div>
                            <div>收纳无人机sn码：{{item.airportChildSn}}</div>
                            <div>无人机电量：{{item.airportChildCapacity}}%</div>
                        </div>
                    </div>
                    <div class="w-right">
                        <div class="w-span">{{item.weather+ " " + item.temperature}}℃</div>
                        <div class="w-span">风速 {{item.windSpeed}}m/s</div>
                        <div class="w-span">雨量 {{item.rainfall}}mm/h</div>
                        <div class="w-btn"><el-button v-hasPermi="['device:airport:edit']" size="medium" type="text" @click="toSecurity(item)">安全设置</el-button></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { listAirport, getRegeo, getWeatherInfo } from "@/api/cruise/airdrome";
export default {
    data(){
        return {
            list: [],
        }
    },
    created(){
        this.getData()
    },
    methods: {
        toSecurity(row) {
            this.$router.push("/cruise/airdrome-edit/security/"+ row.airportId);
            // this.$router.push("/cruise/airdrome-edit/new-security/"+ row.airportId);
        },
        getData(){
            listAirport({pageNum: 1,pageSize: 999}).then(res => {
                console.log("机场列表",res)
                this.list = res.rows || []
                if(this.list.length!=0) {
                    this.list.forEach((item,index) => {
                        this.list[index].weather = "--"
                        this.list[index].temperature = "--"
                        let location = item.longitude + "," + item.latitude
                        this.getWeather(location, index)
                    })
                }
            })
        },
        // 获取地址和天气
        getWeather(location,index) {
            let params = {
                location: location
            }
            getRegeo(params).then(res => {
                // console.log("获取的地址：" + index,res.data)
                let data = res.data
                if(data.status == "1") {
                    this.list[index].airportAddress = data.regeocode.formatted_address
                    this.$set(this.list, index,this.list[index])
                    getWeatherInfo({city:data.regeocode.addressComponent.adcode}).then(resData => {
                        // console.log("天气信息："+ index,resData)
                        if(resData.data.status == '1') {
                            this.list[index].weather = resData.data.lives[0].weather
                            this.list[index].temperature =  resData.data.lives[0].temperature
                            this.$set(this.list, index,this.list[index])
                        }
                    })
                } else {
                    this.list[index].weather = "--"
                    this.list[index].temperature = "--"
                    this.$set(this.list, index,this.list[index])
                }
            })
        }
    },
    filters: {
        modeCode(val) {
            if(val == 0) {
                return "空闲中";
            } else if(val == 1) {
                return "现场调试";
            } else if(val == 2) {
                return "远程调试";
            } else if(val == 3) {
                return "固件升级中";
            } else if(val == 4) {
                return "作业中";
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .app-container {
        background: #f5f5f5;
    }
    .w-container {
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 10px;
        overflow: auto;
        padding: 20px;
    }
    .w-list {
        width: 100%;
        height: 180px;
        background: rgba(245,245,245,.5);
        display: flex;
        margin-bottom: 20px;
        .w-img {
            width: 300px;
            height: 180px;
            background: #fff;
            overflow: hidden;
            img {
                // width: 100%;
                height: 100%;
            }
        }
        .w-cont {
            width: calc(100% - 300px);
            height: 180px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            .w-left {
                width: calc(100% - 150px);
                height: 100%;
                .w-uva-name {
                    display: flex;
                    width: 100%;
                    height: 35px;
                    align-items: center;
                    div {
                        display: flex;
                        align-items: center;
                    }
                    .w-j {
                        margin-left: 50px;
                        display: flex;
                    }
                    .w-dian {
                        width: 6px;
                        height: 6px;
                        background: #000;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    .w-name {
                        margin-right: 10px;
                    }
                }
                .w-address {
                    height: 35px;
                    line-height: 35px;
                    i {
                        margin-right: 10px;
                    }
                }
                .w-p {
                    display: flex;
                    height: 35px;
                    align-items: center;
                    &>div:nth-child(1) {
                        width: 180px;
                        margin-right: 30px;
                    }
                    &>div:nth-child(2) {
                        width: 250px;
                        margin-right: 30px;
                    }
                }
            }
            .w-right {
                width: 150px;
                height: 100%;
                div {
                    height: 35px;
                    line-height: 35px;
                    text-align: right;
                }
            }
        }
    }
</style>